$Color-I: #007adf;
$Color-II: #fadb14;
$Color-III: #faad14;
$Color-IV: #f5222d;

.dashboard_container {
  position: relative;
  width: 100%;
  height: 100%;
  color: #077872;
  .line {
    border-right: 1px solid #077872;
  }
  background-image: url('@/assets/images/access-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.card-main {
  margin-top: 1.5vh;
  margin-left: 4vh;
  font-weight: 700;
  font-size: 2.2vh;
  & > div {
    &:first-child {
      font-weight: 400;
      color: #333333;
      font-size: 1.2vh;
    }
    &:last-child {
      font-weight: 700;
    }
  }
}
.card-foot {
  position: absolute;
  bottom: 0;
  padding: 0 1.5vh;
  width: 100%;
  height: 5.5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-left-radius: 1vh;
  border-bottom-right-radius: 1vh;
  background-color: rgba(245, 245, 250, 0.4);
  backdrop-filter: blur(10px);
  & > div {
    padding-left: 3vh;
    color: #333333;
    flex: 1;
    & > div {
      &:last-child {
        font-size: 2vh;
        font-weight: 700;
      }
    }
  }
}

.ball {
  position: absolute;
  top: 2vh;
  right: 2.5vh;
  width: 8vh;
  height: 9vh;
  line-height: 8vh;
  font-weight: 600;
  font-size: 2vh;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url('@/assets/images/round-ball.png');
  > span {
    background: linear-gradient(180deg, #ffffff 0%, #3bfed6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.card-title {
  padding-top: 1.5vh;
  margin-left: 2vh;
  font-weight: 600;
  font-size: 1.5vh;
}
.seismic_container {
  width: 100%;
  height: 100%;
  .earthquake {
    display: flex;
    justify-content: space-between;
    padding: 0 2vh;

    font-size: 1.2vh;
    margin: 1vh 0;
    .province {
      width: 6vh;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bar-box {
      width: 16vh;
      display: flex;
      justify-content: flex-start;
    }
    .bar {
      height: 2vh;
    }
    .count {
      width: 1.5vh;
      text-align: right;
    }
    .blue {
      background: linear-gradient(
        270deg,
        $Color-I 0%,
        rgba(245, 34, 45, 0) 100%
      );
    }
    .yellow {
      background: linear-gradient(
        270deg,
        $Color-II 0%,
        rgba(245, 34, 45, 0) 100%
      );
    }
    .orange {
      background: linear-gradient(
        270deg,
        $Color-III 0%,
        rgba(245, 34, 45, 0) 100%
      );
    }
    .red {
      background: linear-gradient(
        270deg,
        $Color-IV 0%,
        rgba(245, 34, 45, 0) 100%
      );
    }
  }
}

.earthquake-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 2vh 0;
  height: 4.8vh;

  .earthquake-index {
    margin-right: 1vh;
    font-size: 2vh;
    font-weight: 600;
  }
  .earthquake-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vh 1.5vh;
    width: 100%;

    .earthquake-info {
      > div:first-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.3vh;
      }
      > div:last-child {
        color: #858585;
        font-size: 1vh;
      }
    }
    .earthquake-value {
      padding: 0.2vh;
      border: 0.1vh solid;
      border-color: #007adf;
      > span {
        display: inline-block;
        width: 3vh;
        height: 3vh;
        line-height: 3vh;
        font-size: 1.3vh;
        font-weight: 600;
        text-align: center;
        color: #fff;
        background-color: #007adf;
      }
    }
  }
}

.jump_dom {
  cursor: pointer;
  color: #007adf;
  display: flex;
  align-items: center;
  img {
    width: 1.8vh;
    height: 1.8vh;
  }
}
